<template>
    <div style="margin: auto;width: 80%;min-height: 650px">
        <div style="margin: 20px;height: 30px">
            <Button type="primary" to="/donate/post/myPost" style="margin-left: 10px" ghost>我的发帖</Button>
        </div>
        <Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="80">
            <FormItem label="标题" prop="title">
                <Input v-model="formData.title" ></Input>
            </FormItem>
            <FormItem label="内容" prop="content">
                <!--<Input v-model="formData.content" ></Input>-->
                <div ref="editor" class="text" id="editor" style="min-height: 300px;z-index: 300">
                </div>
            </FormItem>
            <div style="text-align: center;margin: 15px">
                <Button @click="handleReset('formData')">重置</Button>
                <Button type="primary" @click="handleSubmit('formData')" style="margin-left: 8px">保存</Button>
            </div>
            <!--加载中显示 -->
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Form>
    </div>
</template>

<script>
    import Base from '@/components/table/BaseEdit.vue';
    import user from '@/common/user';
    import wang from 'wangeditor';
    import editorUtils from '@/common/editorUtils';
    export default {
        extends:Base,
        data () {
            let posterId=user.getUser().id;
            return {
                ruleValidate: {
                    title: [
                        { required: true, message: '请输入标题!', trigger: 'blur' },
                    ],
                    content: [
                        { required: true, message: '请输入内容!', trigger: 'blur' },
                    ]
                },
                formData:{posterId},
                editor:null
            }
        },
        mounted(){
            this.editor = new wang(this.$refs.editor);
            this.editor.create()  ;   // 创建富文本实例
            editorUtils.init();

            let id=this.$route.query.id;
            if(id != null && id != ""){
               this.$axiosUtils.post("/api/post/read",{id}).then((res)=>{
                   this.formData=res;
                   this.editor.txt.html(res.content);
               }).catch(function (error) {
                   this.$Message.error(error);
               })
            }
        },
        methods: {
            loadDataById(id){
                this.load("/api/post/read",{id})
            },handleSubmit (name) {
                //保存
                this.formData.content=this.editor.txt.html();
                this.save(name,"/api/post/save",()=>{
                    this.$router.push("/donate/post/myPost")
                });
            },
        }
    }
</script>

<style scoped>
    .w-e-menu{
        z-index: 500 !important;
    }
    .w-e-text-container{
        z-index: 600 !important;
    }
</style>
